Sometimes you want to show products on your store but don’t want people to order them anymore – maybe they are out of stock, or you no longer carry them – but you don’t want to just delete the product completely.  With this article we’ll review 3 ways to show the product but hide it’s Add to Cart and View Cart buttons.

ShopSite Pro Makes It Easy

The easiest method is by using a feature in ShopSite Pro that allows you to override the default buttons and set a product’s Add to Cart and View Cart buttons to any image you prefer.  You will find this option by selecting a product in your backoffice and clicking Edit Product Layout:

To take advantage of this feature for hiding your buttons, you just need a transparent image.  Usually a 1 pixel by 1 pixel wide GIF image is used, commonly named “spacer.gif”.

In your ShopSite store you can find a spacer.gif file in the “media/en-US/backgrounds/shared/” folder.  To use this file in one of the fields above, enter this as the image URL:

[shopsite-images]/backgrounds/shared/spacer.gif

Extra Product Template

If you’re running ShopSite Manager, then the option above will not be available, but you can still remove your Add to Cart and View Cart buttons by duplicating your Product Template and removing the HTML code that displays the buttons.  Anytime you then have a product that you want to hide the buttons for you would just assigned it to the new template and publish the change.

For example, you may have code like this in the “[– DEFINE PRODUCT –]” and “[– DEFINE MORE_INFO_PAGE –]” sections of your product template to display your Add to Cart button:

[-- IF VAR.AddButtonGraphic --]
<input type=image src="[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.Media --]/[-- VAR.AddButtonGraphic --]" name="Add to Cart" alt="Add to Cart">
[-- ELSE_IF ADDIMAGE? --]
<input type="image" [--ADDIMAGE--]>
[-- ELSE --]
<input type=submit value="[-- ADDTEXT --]">
[-- END_IF --]

You may also have code similar to this, which displays a View Cart button:

<input type=image src="[-- OUTPUT_DIRECTORY_URL --]/media/view_cart.gif" width="71" height="20" alt="view_cart.gif" hspace="3" vspace="3"  border="0" align="bottom" name="View Cart" alt="View Cart">

You can  remove these lines or use HTML comment tags around them to stop the buttons from appearing.

The IF Option

Another method is to use a single product template and make use of an extra product field and an IF tag to determine if the buttons should appear.  When editing a product’s info, the bottom of the page will contain a list of the Extra Fields available for that product.

• TIP: Turn on more fields or change the names of the fields in your backoffice under Preferences > Extra Fields.

In this example we’ll use Extra Field 5 and will configure our template to check for a value of “no_button”.  The goal is to hide our Add to Cart button if a value of “no_button” is found in the extra field:

[-- IF PRODUCT.Field5 "no_button" --]
[--ELSE--]
<td valign="middle"><input type="image" src="[-- VAR.MyImages --]/images/add_to_cart.gif" value="Add to Cart" /></td>
[--END_IF--]

With the code above, if extra product field 5 has a value of “no_button” then no button is displayed, but if any other value is in field 5 or if the field is blank then the Add to Cart image is shown.  You can modify your template to do this by adding:

[-- IF PRODUCT.Field5 "no_button" --]
[--ELSE--]

before the HTML code for your buttons and by adding:

[--END_IF--]

after the HTML code.  Just be sure to change “PRODUCT.Field5″ from 5 to a different number if you do not use the same field.

As with many ShopSite tips and tricks, there are multiple solutions to this question and we hope that one of the options above will help you hide your buttons when you have a product that you still want to display but don’t want to let anyone add it to their shopping cart.